<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人信息</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .container {
        margin: 60px auto 0;
        width: 690px;
        display: flex;
        flex-direction: column;
      }

      .form-title {
      }
      .form-title h1 {
        padding: 4px 0;
        margin-bottom: 8px;
        font-size: 18px;
        border-bottom: 1px solid salmon;
      }
      .form-title .desc {
        font-size: 14px;
        font-weight: 700;
      }

      .form-container {
        margin-top: 16px;
      }

      form {
        display: flex;
        flex-direction: column;
      }

      .row {
        display: flex;
        align-items: center;
      }

      .row + .row {
        margin-top: 8px;
      }

      .title {
        width: 200px;
      }

      .content {
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 200px;
      }

      .row.name input,
      .row.hukou select,
      .row.home select,
      .row.contact input,
      .row.email input,
      .row.nationality select,
      .row.join-date select {
        width: 100%;
      }

      .content.radio-list {
        display: flex;
        align-items: center;
      }

      .radio-list label {
        margin: 0 4px;
      }
      .row.birthday input {
        width: 50px;
      }

      .row.birthday span {
        margin: 0 4px;
      }

      .button-group {
        display: flex;
        align-items: center;
        padding-left: 120px;
        margin-top: 12px;
      }

      .button-group button {
        margin-right: 4px;
        padding: 4px 16px;
        outline: none;
        background-color: #00f;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="form-title">
        <h1>个人信息</h1>
        <p class="desc">修改个人信息（*为必填项）</p>
      </div>
      <div class="form-container">
        <form action="#">
          <div class="row name">
            <div class="title">*姓名</div>
            <div class="content">
              <input type="text" />
            </div>
          </div>
          <div class="row sex">
            <div class="title">*性别</div>
            <div class="content radio-list">
              <input type="radio" name="sex" value="male" id="male" checked />
              <label for="male">男</label>
              <input type="radio" name="sex" value="famale" id="famale" />
              <label for="famale">女</label>
            </div>
          </div>
          <div class="row birthday">
            <div class="title">*出生日期</div>
            <div class="content">
              <input type="text" value="123" class="year" />
              <span>年</span>
              <input type="text" value="" class="month" />
              <span>月</span>
            </div>
          </div>
          <div class="row join-date">
            <div class="title">*参加工作年份</div>
            <div class="content">
              <select name="" id="">
                <option value="">无工作经验</option>
                <option value="">一年经验</option>
                <option value="">两年经验</option>
              </select>
            </div>
          </div>
          <div class="row hukou">
            <div class="title">*户口所在地</div>
            <div class="content">
              <select name="" id="">
                <option value="">沈阳</option>
                <option value="">大连</option>
                <option value="">哈尔滨</option>
              </select>
            </div>
          </div>
          <div class="row home">
            <div class="title">*现居住城市</div>
            <div class="content">
              <select name="" id="">
                <option value="">沈阳</option>
                <option value="">大连</option>
                <option value="">哈尔滨</option>
              </select>
            </div>
          </div>
          <div class="row contact">
            <div class="title">*联系方式</div>
            <div class="content">
              <input type="tel" />
            </div>
          </div>
          <div class="row email">
            <div class="title">*邮箱</div>
            <div class="content">
              <input type="email" />
            </div>
          </div>
          <div class="row marital-status">
            <div class="title">婚姻状况</div>
            <div class="content">
              <div class="content radio-list">
                <input
                  type="radio"
                  name="marital-status"
                  value="unmarried"
                  id="unmarried"
                  checked
                />
                <label for="unmarried">未婚</label>
                <input
                  type="radio"
                  name="marital-status"
                  value="married"
                  id="married"
                />
                <label for="married">已婚</label>
                <input
                  type="radio"
                  name="marital-status"
                  value="divorce"
                  id="divorce"
                />
                <label for="divorce">离异</label>
              </div>
            </div>
          </div>
          <div class="row nationality">
            <div class="title">国籍</div>
            <div class="content">
              <select name="" id="">
                <option value="">中国大陆</option>
                <option value="">美国</option>
                <option value="">日本</option>
              </select>
            </div>
          </div>
          <div class="row abroad">
            <div class="title">海外学习/工作经历</div>
            <div class="content">
              <div class="content radio-list">
                <input
                  type="radio"
                  name="abroad"
                  value="yes"
                  id="abroad-yes"
                  checked
                />
                <label for="abroad-yes">有</label>
                <input type="radio" name="abroad" value="no" id="abroad-no" />
                <label for="abroad-no">无</label>
              </div>
            </div>
          </div>
          <div class="row political-status">
            <div class="title">政治面貌</div>
            <div class="content">
              <div class="content radio-list">
                <input
                  type="radio"
                  name="political-status"
                  value="party-member"
                  id="party-member"
                />
                <label for="party-member">中共党员（含预备党员）</label>
                <input
                  type="radio"
                  name="political-status"
                  value="league-member"
                  id="league-member"
                  checked
                />
                <label for="league-member">团员</label>
                <input
                  type="radio"
                  name="political-status"
                  value="the-people"
                  id="the-people"
                />
                <label for="the-people">群众</label>
                <input
                  type="radio"
                  name="political-status"
                  value="democratic-parties"
                  id="democratic-parties"
                />
                <label for="democratic-parties">民主党派</label>
                <input
                  type="radio"
                  name="political-status"
                  value="non-party"
                  id="non-party"
                />
                <label for="non-party">无党派人士</label>
              </div>
            </div>
          </div>
          <div class="button-group">
            <button class="save">保存</button>
            <a href="#">返回</a>
          </div>
        </form>
      </div>
    </div>

    <!-- <script>
      $(() => {
        const data = {
          name: "",
          sex: "",
          birthday: "",
          joinDate: "",
          hukou: "",
          home: "",
          contact: "",
          email: "",
          maritalStatus: "",
          nationality: "",
          abroad: "",
          politicalStatus: "",
        }

        const handleFormData = {
          handleName() {
            const value = $(".name input").val()
            data.name = value
          },

          handleSex() {
            const value = $(".sex input:radio:checked").val()
            data.sex = value === "male" ? "男" : "女"
          },

          handleBirthday() {
            const year = $(".birthday .year").val()
            const month = $(".birthday .month").val()
            data.birthday = `${year}年${month}月`
          },

          handleJoinDate() {
            const value = $(".join-date select option:selected").val()
            data.joinDate = value
          },

          handleHukou() {
            const value = $(".hukou select option:selected").val()
            data.hukou = value
          },

          handleContact() {
            const value = $(".contact input").val()
            data.contact = value
          },

          handleEmail() {
            const value = $(".email input").val()
            data.email = value
          },

          handleMaritalStatus() {
            const value = $(".marital-status input:radio:checked").val()
            data.maritalStatus = value
          },

          handleNationality() {
            const value = $(".nationality select option:selected").val()
            data.nationality = value
          },

          handleAbroad() {
            const value = $(".nationality input:radio:checked").val()
            data.abroad = value
          },

          handlePoliticalStatus() {
            const value = $(".political-status input:radio:checked").val()
            data.abroad = value
          },
        }

        $(".save").click(() => {
          Object.keys(handleFormData).forEach((e) => {
            handleFormData[e]()
          })
          console.log(data)
        })
      })
    </script> -->
  </body>
</html>
